@charset "UTF-8";
/*
 * Copyright (c) 2015 Cybozu
 *
 * Licensed under the MIT License
*/

*[class|="kintoneplugin"] {
    color: #333;
    word-wrap: break-word;
    font-size: 16px;
    line-height: 1.5;
}

:lang(ja) *[class|="kintoneplugin"] {
    font-family: 'メイリオ', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

:lang(zh) *[class|="kintoneplugin"] {
    font-family: '微软雅黑', 'Microsoft YaHei', '新宋体', NSimSun, STHeiti, Hei, 'Heiti SC', sans-serif;
}

:lang(us) *[class|="kintoneplugin"] {
    font-family: 'HelveticaNeueW02-45Ligh', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* メッセージのスタイル */
/*
<div class="kintoneplugin-alert">
  <p>メッセージのスタイル、<br>メッセージのスタイル</p>
  <p>メッセージのスタイル</p>
</div>
*/
.kintoneplugin-alert {
    position: relative;
    display: block;
    margin: 8px 0;
    padding: 4px 18px;
    background: #e74c3c;
    color: #f6f6f6;
}

/* 設定項目の行 */
/*
<div class="kintoneplugin-row">設定項目の行 1</div>
<div class="kintoneplugin-row">設定項目の行 2</div>
*/
.kintoneplugin-row {
    margin-bottom: 24px;
}

/* 設定項目の見出し */
/* ラベル */
/*
<div class="kintoneplugin-label">設定項目の見出し</div>
*/
.kintoneplugin-label {
    margin-bottom: 8px;
    font-weight: bold;
}

/* 設定項目の見出し */
/* 項目 */
/*
<div class="kintoneplugin-label">設定項目の見出し</div>
*/
.kintoneplugin-title {
    margin-bottom: 8px;
}

/* 設定項目の説明 */
/* 説明 */
/*
<div class="kintoneplugin-desc">設定項目の説明</div>
*/
.kintoneplugin-desc {
    margin-bottom: 8px;
    font-size: 14px;
    color: #888;
}

/* 必須項目 */
/*
<div class="kintoneplugin-label">必須項目の見出し<span class="kintoneplugin-require">*</span></div>
*/
.kintoneplugin-require {
    color: #c09853;
}

/* テキストボックス */
/*
<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text">
</div>
*/
.kintoneplugin-input-outer {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.kintoneplugin-input-text {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px;
    height: 48px;
    outline: none;
    border: 1px solid #e3e7e8;
    background-color: #fff;
    box-shadow: 4px 4px 12px #f5f5f5 inset, -4px -4px 12px #f5f5f5 inset;
    color: #a7a7a7;
    font-size: 14px;
}

.kintoneplugin-input-text:focus {
    background-color: #e2f2fe;
    box-shadow: none;
    color: #000;
}

/* チェックボックス */
/* IE8では親要素に .lt-ie9 の指定が必要 */
/*
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="0" id="checkbox-0" checked=""><label for="checkbox-0">チェックボックスA</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="1" id="checkbox-1"><label for="checkbox-1">チェックボックスB</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="2" id="checkbox-2" checked="" disabled=""><label for="checkbox-2">チェックボックスC</label></span></div>
<div class="kintoneplugin-input-checkbox"><span class="kintoneplugin-input-checkbox-item"><input type="checkbox" name="checkbox" value="3" id="checkbox-3" disabled=""><label for="checkbox-3">チェックボックスD</label></span></div>
*/
.kintoneplugin-input-checkbox-item {
    display: block;
    margin-right: 16px;
    margin-bottom: 8px;
    padding-left: 1px;
    max-width: 98%;
}

.kintoneplugin-input-checkbox-item-block {
    display: block;
}

.kintoneplugin-input-checkbox-item-inline {
    display: inline-block;
}

.kintoneplugin-input-checkbox-item:hover + label {
    color: #666;
}

.kintoneplugin-input-checkbox-item input[type="checkbox"] {
    display: none;
    cursor: pointer;
}

.kintoneplugin-input-checkbox-item input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    margin-left: 32px;
    vertical-align: middle;
    font-size: 14px;
    cursor: pointer;
}

.kintoneplugin-input-checkbox-item input[type="checkbox"][disabled] + label {
    color: #bababa;
    cursor: not-allowed;
}

.kintoneplugin-input-checkbox-item input[type="checkbox"] + label:before {
    position: absolute;
    top: 50%;
    left: -30px;
    display: inline-block;
    box-sizing: border-box;
    margin-top: -11px;
    width: 21px;
    height: 21px;
    background: #fff;
    background: url() no-repeat center center #fff;
    content: "";
}

.kintoneplugin-input-checkbox-item input[type="checkbox"]:checked + label:after {
    position: absolute;
    top: 50%;
    left: -30px;
    box-sizing: border-box;
    margin-top: -11px;
    width: 21px;
    height: 21px;
    background: url() no-repeat center center #fff;
    content: "";
}

.kintoneplugin-input-checkbox-item input[type="checkbox"][disabled]:checked + label:after {
    background-image: url();
}

.lt-ie9 .kintoneplugin-input-checkbox-item input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
}

.lt-ie9 .kintoneplugin-input-checkbox-item input[type="checkbox"] + label {
    margin-left: 4px;
}

.lt-ie9 .kintoneplugin-input-checkbox-item input[type="checkbox"] + label:before {
    display: none;
}

.lt-ie9 .kintoneplugin-input-checkbox-item input[type="checkbox"]:checked + label:after {
    display: none;
}

/* ドロップダウンリスト */
/*
<div class="kintoneplugin-dropdown-outer">
  <div class="kintoneplugin-dropdown">
    <div class="kintoneplugin-dropdown-selected"><span class="kintoneplugin-dropdown-selected-name">ドロップダウン</span></div>
  </div>
</div>
<div class="kintoneplugin-dropdown-list">
  <div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected"><span class="kintoneplugin-dropdown-list-item-name">オプションA</span></div>
  <div class="kintoneplugin-dropdown-list-item"><span class="kintoneplugin-dropdown-list-item-name">オプションB</span></div>
  <div class="kintoneplugin-dropdown-list-item"><span class="kintoneplugin-dropdown-list-item-name">オプションC</span></div>
</div>
*/
.kintoneplugin-dropdown-outer {
    display: inline-block;
}

.kintoneplugin-dropdown {
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 0;
    padding: 0 16px;
    min-width: 80px;
    max-width: 280px;
    height: 48px;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    box-shadow: 1px 1px 1px #fff inset;
    color: #3498db;
    text-overflow: ellipsis;
}

.kintoneplugin-dropdown:hover {
    background-color: #f4f7f8;
    cursor: pointer;
}

.kintoneplugin-dropdown-selected {
    padding-right: 48px;
    background: url() no-repeat right center;
}

.kintoneplugin-dropdown-selected-name {
    color: #3498db;
    font-size: 14px;
    line-height: 48px;
}

.kintoneplugin-dropdown-list {
    padding: 12px 0 0 0;
    min-width: 280px;
    border: 1px solid #e3e7e8;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

.kintoneplugin-dropdown-list-item {
    padding: 1px 16px 8px 25px;
    line-height: 1;
    cursor: pointer;
}

.kintoneplugin-dropdown-list-item-name {
    font: normal 13px Arial, sans-serif;
    line-height: 1;
}

.kintoneplugin-dropdown-list-item-selected {
    background: url() no-repeat 7px 4px;
}

.kintoneplugin-dropdown-list-item-selected .kintoneplugin-dropdown-list-item-name {
    color: #3498db;
}

/* (セレクトボックス) */
/*
<div class="kintoneplugin-select-outer">
  <div class="kintoneplugin-select">
    <select>
      <option>ドロップダウンリストA</option>
      <option>ドロップダウンリストB</option>
      <option>ドロップダウンリストC</option>
    </select>
  </div>
</div>
*/
.kintoneplugin-select-outer {
    display: inline-block;
}

.kintoneplugin-select {
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 8px;
    padding: 0 32px 0 8px;
    min-width: 80px;
    max-width: 280px;
    height: 48px;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    box-shadow: 1px 1px 1px #fff inset;
    text-overflow: ellipsis;
}

.kintoneplugin-select:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 32px;
    background: url() no-repeat center center transparent;
    content: "";
    pointer-events: none;
}

.kintoneplugin-select:hover {
    background-color: #f4f7f8;
    cursor: pointer;
}

.lt-ie9 .kintoneplugin-select:hover {
    background-color: transparent;
}

.kintoneplugin-select select {
    margin: 0;
    min-width: 140px;
    width: 144%;
    height: 48px;
    outline: none;
    border: 0 none;
    background-color: transparent;
    color: #3498db;
    font-size: 13px;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

.kintoneplugin-select option {
    background-color: #fff;
    color: #333;
}

/* ラジオボタン */
/* IE8では親要素に .lt-ie9 の指定が必要 */
/*
<div class="kintoneplugin-input-radio"><span class="kintoneplugin-input-radio-item"><input type="radio" name="radio" value="0" id="radio-0" checked=""><label for="radio-0">ラジオボタンA</label></span><span class="kintoneplugin-input-radio-item"><input type="radio" name="radio" value="1" id="radio-1"><label for="radio-1">ラジオボタンB</label></span></div>
*/
.kintoneplugin-input-radio-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 8px;
    padding-left: 1px;
    max-width: 98%;
    font-size: 14px;
}

.kintoneplugin-input-radio-item:hover + label {
    color: #666;
}

.kintoneplugin-input-radio-item input[type="radio"] {
    display: none;
    cursor: pointer;
}

.kintoneplugin-input-radio-item input[type="radio"] + label {
    position: relative;
    display: inline-block;
    margin-left: 32px;
    vertical-align: middle;
    cursor: pointer;
}

.kintoneplugin-input-radio-item input[type="checkbox"][disabled] + label {
    color: #bababa;
    cursor: not-allowed;
}

.kintoneplugin-input-radio-item input[type="radio"] + label:before {
    position: absolute;
    top: 50%;
    left: -30px;
    box-sizing: border-box;
    margin-top: -11px;
    width: 21px;
    height: 21px;
    border: 1px solid #e3e7e8;
    border-radius: 50%;
    background: #fff;
    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;
    content: "";
    font-size: 14px;
}

.kintoneplugin-input-radio-item input[type="radio"]:checked + label:after {
    position: absolute;
    top: 50%;
    left: -26px;
    margin-top: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #3498db;
    content: "";
}

.lt-ie9 .kintoneplugin-input-radio-item input[type="radio"] {
    display: inline-block;
    vertical-align: middle;
}

.lt-ie9 .kintoneplugin-input-radio-item input[type="radio"] + label {
    margin-left: 4px;
}

.lt-ie9 .kintoneplugin-input-radio-item input[type="radio"] + label:before {
    display: none;
}

.lt-ie9 .kintoneplugin-input-radio-item input[type="radio"]:checked + label:after {
    display: none;
}

/* ボタン */
/*
<button class="kintoneplugin-button-normal">通常のボタン</button>
*/
.kintoneplugin-button-normal {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 16px;
    min-width: 163px;
    height: 48px;
    outline: none;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    box-shadow: 1px 1px 1px #fff inset;
    color: #3498db;
    text-align: center;
    line-height: 48px;
}

.kintoneplugin-button-normal:hover {
    background-color: #c8d6dd;
    box-shadow: none;
    cursor: pointer;
}

/* disabledのボタン */
/*
<button class="kintoneplugin-button-disabled">disabledのボタン</button>
*/
.kintoneplugin-button-disabled {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 16px;
    min-width: 163px;
    height: 48px;
    outline: none;
    border: 1px solid #e3e7e8;
    background-color: #dbdcdd;
    box-shadow: none;
    color: #bababa;
    text-align: center;
    line-height: 48px;
}

/* ダイアログのOKボタン */
/*
<button class="kintoneplugin-button-dialog-ok">ダイアログのOKボタン</button>
*/
.kintoneplugin-button-dialog-ok {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 16px;
    min-width: 163px;
    height: 48px;
    outline: none;
    border: 1px solid #e3e7e8;
    background-color: #3498db;
    box-shadow: 1px 1px 1px #8ccbee inset;
    color: #fff;
    text-align: center;
    line-height: 48px;
}

.kintoneplugin-button-dialog-ok:hover {
    background-color: #1d6fa5;
    cursor: pointer;
}

/* ダイアログのキャンセルボタン */
/*
<button class="kintoneplugin-button-dialog-cancel">ダイアログのキャンセルボタン</button>
*/
.kintoneplugin-button-dialog-cancel {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 16px;
    min-width: 163px;
    height: 48px;
    outline: none;
    border: 1px solid #e3e7e8;
    background-color: #f7f9fa;
    box-shadow: 1px 1px 1px #fff inset;
    color: #3498db;
    text-align: center;
    line-height: 48px;
}

.kintoneplugin-button-dialog-cancel:hover {
    background-color: #c8d6dd;
    box-shadow: none;
    cursor: pointer;
}